import { computed, defineComponent, ref } from "vue";
import PageTitle from "@/components/PageTitle";
import ButtonView from "@/components/ButtonView";
import { useRequest } from "./request";
import BannerUploader from "@/components/BannerUploader";
import FormGroup from "@/components/FormGroup";
import { FormGroupPropsData } from "@/components/FormGroup/types";
import EquipmentDetail from "@/pages/equipmentDetail";
import FarmProductDetail from "@/pages/farmProductDetail";
import { isDh } from "@/command/apiTool";
import { IFormRef } from "@/components/Form/types";
export default defineComponent({
  name: "",
  setup() {
    const {
      confirm,
      personCenterMainBody,
      getProductRoot,
      entityList,
      countryList,
    } = useRequest();
    const formRef = ref<IFormRef>();
    let data = computed<(FormGroupPropsData & { display?: boolean })[]>(
      () =>
        [
          {
            display: true,
            title: "",
            data: [
              {
                label: "主体名称",
                type: "input",
                key: "entityName",
                rules: [
                  {
                    required: true,
                  },
                ],
              },
              {
                label: "主体类型",
                type: "select",
                key: "mccid",
                rules: [
                  {
                    required: true,
                  },
                ],
                typeData: entityList.value,
              },
              {
                label: "种植品种",
                type: "multiple",
                key: "productTypeId",
                rules: [
                  {
                    required: true,
                  },
                ],
                typeData: getProductRoot.value,
                // typeData: getProductRoot.value.map((e) => {
                //   return { label: e.name, value: e.id };
                // }),
              },
              {
                label: "联系方式",
                type: "input",
                key: "phone",
                readonly: true,
                rules: [
                  {
                    required: true,
                  },
                ],
              },
              {
                label: "联系地址",
                type: "select",
                key: "countryCode",
                rules: [
                  {
                    required: true,
                    message: "请选择联系地址",
                  },
                ],
                typeData: countryList.value,
              },
              {
                label: "详细地址",
                type: "input",
                key: "address",
                rules: [
                  {
                    required: true,
                  },
                ],
              },
            ],
          },
          {
            display: true,
            title: "",
            data: [
              {
                key: "entityComment",
                label: "主体介绍",
                type: "textarea",
              },
            ],
          },
          {
            display: isDh(),
            title: "",
            data: [
              {
                key: "means",
                label: "所用农资",
                type: "uploadPopup",
                view: FarmProductDetail,
              },
            ],
          },
          {
            display: isDh(),
            data: [
              {
                key: "equipments",
                label: "检测设备",
                type: "uploadPopup",
                view: EquipmentDetail,
              },
            ],
          },
        ].filter((e) => e.display) as FormGroupPropsData[]
    );

    const render1 = () => {
      return (
        <BannerUploader
          v-model={personCenterMainBody.value.logo}
          class="w-full !h-[178px]"
        />
      );
    };

    const render2 = () => {
      return (
        <div class={"p-[10px]"}>
          <FormGroup
            data={data.value}
            v-model={personCenterMainBody.value}
            class="m-child-top-20"
            ref={formRef}
          />
          <ButtonView
            block
            type="primary"
            class="!mt-[20px] !h-[40px]"
            onClick={() => {
              formRef.value?.submit(({ result, error, submitState }) => {
                submitState && confirm(personCenterMainBody.value);
              });
            }}
          >
            确定
          </ButtonView>
        </div>
      );
    };
    return () => {
      return (
        <PageTitle title="我的主页">
          {render1()}
          {render2()}
        </PageTitle>
      );
    };
  },
});
